<template>
  <!-- 顶部导航栏 -->
  <div>
    <el-container>
      <div class="topbar">
        <div class="nav">
          <ul>
            <li v-if="!this.$store.getters.getUser">
              <el-button type="text" @click="login">登录</el-button>
              <span class="sep">|</span>
              <el-button type="text" @click="ToAdmin">管理员登录</el-button>
            </li>
            <li v-else>
              欢迎
              <el-popover placement="top" width="180" v-model="visible">
                <p>确定退出登录吗？</p>
                <div style="text-align: right; margin: 10px 0 0">
                  <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                  <el-button type="primary" size="mini" @click="logout">确定</el-button>
                </div>
                <el-button type="text" slot="reference">{{ this.$store.getters.getUser.name }}</el-button>
              </el-popover>
            </li>
<!--            <li>-->
<!--              <router-link to="/order">我的订单</router-link>-->
<!--            </li>-->
<!--            <li :class="getNum > 0 ? 'shopCart-full' : 'shopCart'">-->
<!--              <router-link to="/shoppingCart">-->
<!--                <i class="el-icon-shopping-cart-full"></i> 购物车-->
<!--                <span class="num">({{ getNum }})</span>-->
<!--              </router-link>-->
<!--            </li>-->
          </ul>
        </div>
      </div>
      <MyLogin></MyLogin>
      <!-- 注册模块 -->
    </el-container>
  </div>
  <!-- 顶部导航栏END -->
</template>

<script>
import {mapActions, mapGetters} from "vuex";
import MyLogin from "@/components/MyLogin";

export default {
  name: "Navigation",
  components: {
    MyLogin,
  },
  data() {
    return {
      activeIndex: "", // 头部导航栏选中的标签
      search: "", // 搜索条件
      register: false, // 是否显示注册组件
      visible: false // 是否退出登录
    }
  },
  computed: {
    ...mapGetters(["getUser", "getNum"])
  },
  watch: {
    // 获取vuex的登录状态
    getUser: function(val) {
      if (val === "") {
        // 用户没有登录
        this.setShoppingCart([]);
      } else {
        // 用户已经登录,获取该用户的购物车信息
        this.$axios
            .post("/shoppingCart/getShoppingCart", {
              user_id: val.id
            })
            .then(res => {
              if (res.data.code === 200) {
                // 001 为成功, 更新vuex购物车状态
                this.setShoppingCart(res.data.data);
              } else {
                // 提示失败信息
                this.notifyError(res.data.message);
              }
            })
            .catch(err => {
              return Promise.reject(err);
            });
      }
    }
  },
  methods: {
    ...mapActions(["setUser", "setShowLogin","setShoppingCart","setRole"]),
    login() {
      // 点击登录按钮, 通过更改vuex的showLogin值显示登录组件
      //this.$store.commit("setShowLogin", true);
      this.setShowLogin(true)
      console.log("显示登录" + this.$store.getters.getShowLogin)
    },
    logout() {
      this.visible = false;
      // 清空本地登录信息
      localStorage.setItem("user", "");
      // 清空vuex登录信息
      this.setUser("");
      this.setRole("");
      const storage = window.localStorage;
      storage.clear()
      this.$router.push("/")
    },
    // 接收注册子组件传过来的数据
    isRegister(val) {
      this.register = val;
    },
    ToAdmin(){
      this.$router.push("/adminLogin")
    }
  }
}
</script>

<style scoped>
@import "../../assets/css/index.css";
.topbar {
  height: 40px;
  width: 100%;
  background-color: #023b7c;
  margin-bottom: 20px;
}

.topbar .nav {
  width: 1225px;
  margin: 0 auto;
}

.topbar .nav ul {
  margin-top: 0;
  float: right;
}

.topbar .nav li {
  float: left;
  height: 40px;
  color: #b0b0b0;
  font-size: 14px;
  text-align: center;
  line-height: 40px;
  margin-left: 20px;
}

.topbar .nav .sep {
  color: #b0b0b0;
  font-size: 12px;
  margin: 0 5px;
}

.topbar .nav li .el-button {
  color: #b0b0b0;
}

.topbar .nav .el-button:hover {
  color: #fff;
}

.topbar .nav li a {
  color: #b0b0b0;
}

.topbar .nav a:hover {
  color: #1e75d6;
}

.topbar .nav .shopCart {
  width: 120px;
  background: #424242;
}

.topbar .nav .shopCart:hover {
  background: #fff;
}

.topbar .nav .shopCart:hover a {
  color: #ff6700;
}

.topbar .nav .shopCart-full {
  width: 120px;
  background: #ff6700;
}

.topbar .nav .shopCart-full a {
  color: white;
}

/* 顶部导航栏CSS END */
</style>